<template>
  <div class="notes">
    <el-row>
      <el-col :span="4">
        <span>我的作品集</span>
      </el-col>
      <el-col :span="20">
        <div class="notes-label">
          <span>我的作品集</span>
          <el-button style="margin-left: 20px; font-size: 14px;" text icon="Plus" @click="handleAdd">创建作品集</el-button>
        </div>
        <div class="notes-cps">
          <div v-for="(item, index) in cpsList" :key="index" class="notes-cps-card">
            <img :src="getImgUrl(item.noteIcon)" alt="">
            <div class="ncc-left">
              <div class="ncc-left-name text-hidden2" @click="goNote(item)">{{ item.noteName }}</div>
              <div class="ncc-left-desc text-hidden3">{{ item.noteDesc }}</div>
              <div class="ncc-left-desc">{{ item.createTime }}</div>
              <div class="ncc-left-btns">
                <el-button type="success" size="small" plain icon="Edit" @click="handleUpdate(item)">编辑</el-button>
                <el-button type="primary" size="small" plain icon="Upload" @click="handleAdd">导出</el-button>
                <el-button type="danger" size="small" plain icon="Delete" @click="handleDelete(item)">删除</el-button>
              </div>
            </div>
          </div>
        </div>
      </el-col>
    </el-row>
    <!-- 添加或修改作品集对话框 -->
    <el-dialog :title="title" v-model="open" width="700px" append-to-body>
      <el-form ref="compositionRef" :model="form" :rules="rules" label-width="80px">
        <el-form-item label="名称" prop="noteName">
          <el-input v-model="form.noteName" placeholder="请输入作品集名称"/>
        </el-form-item>
        <el-form-item label="介绍" prop="noteDesc">
          <el-input v-model="form.noteDesc" type="textarea" placeholder="请输入内容"/>
        </el-form-item>
        <el-form-item label="图标" prop="noteIcon">
          <image-upload v-model="form.noteIcon" :limit="1"/>
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="submitForm">确 定</el-button>
          <el-button @click="cancel">取 消</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup name="Notes">
import {
  getCompositionList,
  delComposition,
  addComposition,
  updateComposition,
  getComposition
} from "@/api/arts";
import {useRouter} from "vue-router";

const {proxy} = getCurrentInstance();

const router = useRouter();
// 作品集部分
const cpsList = ref([])
const open = ref(false);
const loading = ref(true);
const total = ref(0);
const title = ref("");

const data = reactive({
  form: {},
  queryParams: {
    pageNum: 1,
    pageSize: 10,
    noteName: null,
    noteDesc: null,
    noteIcon: null,
  },
  rules: {}
});

const {queryParams, form, rules} = toRefs(data);

const getList = () => {
  getCompositionList(queryParams.value).then(res => {
    if (res.code === 200) {
      cpsList.value = res.rows
      total.value = res.total;
    }
  })
}

// 取消按钮
function cancel() {
  open.value = false;
  reset();
}

// 表单重置
function reset() {
  form.value = {
    id: null,
    noteName: null,
    noteDesc: null,
    noteIcon: null,
    createTime: null,
    createBy: null,
    updateTime: null,
    updateBy: null,
    delFlag: null
  };
  proxy.resetForm("compositionRef");
}

/** 搜索按钮操作 */
function handleQuery() {
  queryParams.value.pageNum = 1;
  getList();
}

/** 重置按钮操作 */
function resetQuery() {
  proxy.resetForm("queryRef");
  handleQuery();
}

/** 新增按钮操作 */
function handleAdd() {
  reset();
  open.value = true;
  title.value = "创建作品集";
}

/** 修改按钮操作 */
function handleUpdate(row) {
  reset();
  getComposition(row.id).then(response => {
    form.value = response.data;
    open.value = true;
    title.value = "修改作品集";
  });
}

/** 提交按钮 */
function submitForm() {
  proxy.$refs["compositionRef"].validate(valid => {
    if (valid) {
      if (form.value.id != null) {
        updateComposition(form.value).then(response => {
          proxy.$modal.msgSuccess("修改成功");
          open.value = false;
          getList();
        });
      } else {
        addComposition(form.value).then(response => {
          proxy.$modal.msgSuccess("新增成功");
          open.value = false;
          getList();
        });
      }
    }
  });
}

/** 删除按钮操作 */
function handleDelete(row) {
  proxy.$modal.confirm('是否确认删除作品集："' + row.noteName + '"？').then(function () {
    return delComposition(row.id);
  }).then(() => {
    getList();
    proxy.$modal.msgSuccess("删除成功");
  }).catch(() => {
  });
}

/** 跳转作品内容 */
function goNote(item) {
  router.push({
    path: '/note-edit',
    query: {
      noteId: item.id,
      noteName: item.noteName
    }
  })
}

getList();

</script>

<style lang="scss" scoped>
.notes {
  padding: 10px 20px;

  .notes-label {
    font-size: 16px;
    color: var(--tc-title-color);
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-weight: 600;
  }

  .notes-cps {
    margin-top: 10px;

    &-card {
      display: flex;
      padding: 20px;
      box-shadow: 2px 2px 2px 2px rgba(0, 0, 0, 0.2);
      border-radius: 10px;
      margin: 0 10px 10px 0;

      >img {
        width: 80px;
        height: 80px;
      }

      > span {
        font-size: 14px;
      }

      .ncc-left {
        margin-left: 8px;

        &-name {
          font-size: 16px;
          cursor: pointer;
        }

        &-desc {
          font-size: 14px;
          margin-top: 6px;
          color: #999999;
        }

        &-btns {
          margin-top: 10px;
        }
      }
    }
  }

}
</style>
